<template>
    <div class="page-wrap page-wrap-ql" v-loading="loading" :loading-fullscreen="true">
        <div class="page-cont" v-if="detailData.id">
            <a-page-header @back="handleBack">
                <template #title>
                    {{ detailData.systemName }}
                </template>
            </a-page-header>
            <base-info :detail="detailData" />
            <!-- <p-b-i-section :detail="detailData" @success="getDetailData" /> -->
            <perm-section :detail="detailData" :disabled="true" />
            <audit-section :detail="detailData" />
            <!-- <label-section :detail="detailData" /> -->
            <!-- 外采不显示jira设置 -->
            <!-- <jira-section :detail="detailData" v-if="detailData.systemType !== '1'" /> -->
            <work-section :detail="detailData" />
        </div>
    </div>
</template>

<script lang="ts">
import BaseInfo from '@/views/setting/system/systemDetail/components/BaseInfo.vue';
import PermSection from '@/views/setting/system/systemDetail/components/PermSection.vue';
import AuditSection from '@/views/setting/system/systemDetail/components/AuditSection.vue';
import LabelSection from '@/views/setting/system/systemDetail/components/LabelSection.vue';
import JiraSection from '@/views/setting/system/systemDetail/components/JiraSection.vue';
import WorkSection from '@/views/setting/system/systemDetail/components/WorkSection.vue';
import PBISection from '@/views/setting/system/systemDetail/components/PBISection/index.vue';
import api from '@/api';
import store from '@/store';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import { message } from 'ant-design-vue';
import { defineComponent, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    components: {
        BaseInfo,
        PermSection,
        AuditSection,
        LabelSection,
        JiraSection,
        WorkSection,
        PBISection
    },
    setup() {
        const { route, handleBack } = useRouterApi({
            backQuery: {
                path: '/setting/system/systemList'
            }
        });
        const state = reactive<any>({
            loading: false,
            detailData: {}
        });
        const getDetailData = async () => {
            state.loading = true;
            const query = {
                id: route.query.id
            };
            const { success, moule, errorMsg } = await api.productDetailModel.findById(query);
            if (success) {
                state.detailData = { ...moule };
            } else {
                message.error(errorMsg);
            }
            state.loading = false;
        };
        const isAdmin = computed(() => {
            return store.getters.userInfo.roles.includes('admin');
        });
        const isTeamLeader = computed(() => {
            return store.getters.userInfo.roles.includes('需求管理员');
        });
        const disabled = computed(() => {
            return !isAdmin.value && !isTeamLeader.value;
        });
        const init = () => {
            if (route.query.id) {
                getDetailData();
            }
        };
        init();
        return {
            ...toRefs(state),
            isAdmin,
            isTeamLeader,
            disabled,
            handleBack,
            getDetailData
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
    }
}
</style>